<template>
  <div class="container">
    <div style="padding: 10px 20px;">
      <NormalMaterial :currentTab="currentTab" :tabList="tabList" :formList="formList" :queryForm="queryForm" pagePwd="Poster" @tabClick="tabClick" @handleQuery="handleQuery">
        <template slot="one">
          <div class="card-list">
            <div class="card-item" v-for="item in companyTableList" :key="item.id">
              <el-image style="width: 187px; height: 241px; background-color: #f6f6f6;" fit="contain" :src="item.coverUrl"></el-image>
              <p class="title">
                <span>{{ item.materialName }}</span>
                <span class="verify">{{ item.examineBy }}</span>
              </p>
              <p class="time">{{ item.createTime }}</p>
              <div class="btn-list">
                <el-tag size="mini" @click="view(item.coverUrl)">预览
                </el-tag>
                <el-tag size="mini" @click="edit(item.id, 'one' , 0)" v-hasPermi="['wecom:material:edit:corp']">编辑
                </el-tag>
                <el-tag size="mini" @click="del(item.id)" v-hasPermi="['wecom:material:delete:corp']">删除</el-tag>
              </div>
            </div>
          </div>
          <div v-if="companyTableList.length > 0">
            <NormalPagination :currentPage="companyPageNum" :pageSize="companyPageSize" :total="companyTotal" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
          </div>
        </template>
        <template slot="two">
          <div class="card-list">
            <div class="card-item" v-for="item in selfTableList" :key="item.id">
              <el-image style="width: 187px; height: 241px; background-color: #f6f6f6;" fit="contain" :src="item.coverUrl"></el-image>
              <p class="title">
                <span>{{ item.materialName }}</span>
                <span class="verify">{{ item.examineBy }}</span>
              </p>
              <p class="time">{{ item.createTime }}</p>
              <div class="btn-list">
                <el-tag size="mini" @click="view(item.coverUrl)">预览
                </el-tag>
                <el-tag size="mini" @click="edit(item.id, 'one' , 1)" v-hasPermi="['wecom:material:edit:corp']">编辑
                </el-tag>
                <el-tag size="mini" @click="del(item.id)" v-hasPermi="['wecom:material:delete:corp']">删除</el-tag>
              </div>
            </div>
          </div>
          <div v-if="selfTableList.length > 0">
            <NormalPagination :currentPage="selfPageNum" :pageSize="selfPageSize" :total="selfTotal" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
          </div>
        </template>
        <template v-if="currentTab === '1'" slot="material-btn">
          <el-button icon="el-icon-plus" type="primary" @click="toArticle()">创建海报</el-button>
        </template>
      </NormalMaterial>
    </div>
    <el-dialog title="预览" width="350px" :visible.sync="viewVisible">
      <el-image :src="viewSrc"></el-image>
    </el-dialog>
  </div>
</template>

<script>
import { articleDel, articleDelCorp, posterList } from '@/api/article/group'
import { dateFormat } from '@/utils'

export default {
  data() {
    return {
      domain: window.globalConfig.IMAGE_API,
      tabList: [
        { label: '企业海报夹', vlaue: '0', slotName: 'one' },
        { label: '我创建的海报', vlaue: '1', slotName: 'two' },
      ],
      queryForm: {
        materialName: '',
      },
      searchNameA: '',
      searchNameB: '',
      formList: [
        {
          label: '海报标题',
          value: '',
          prop: 'materialName',
          type: 'INPUT',
          emunName: '',
        },
      ],
      currentTab: '0',
      loading: false,
      companyTableList: [],
      companyTotal: 0,
      companyPageNum: 1,
      companyPageSize: 20,
      selfTableList: [],
      selfTotal: 0,
      selfPageNum: 1,
      selfPageSize: 20,
      viewVisible: false,
      viewSrc: '',
    }
  },
  created() {
    this.currentTab = this.$route.query.is_person ? this.$route.query.is_person + '' : '0'
    this.handleQuery()
  },
  methods: {
    tabClick(val) {
      this.categoryId = ''
      this.queryForm.materialName =
        val == '0' ? this.searchNameA : this.searchNameB
      this.currentTab = val
      this.handleQuery(this.categoryId)
    },
    handleQuery(categoryId, pageNum) {
      this.loading = true
      this.categoryId = categoryId
      let tempNum =
        this.currentTab == '0' ? this.companyPageNum : this.selfPageNum
      let tempSize =
        this.currentTab == '0' ? this.companyPageSize : this.selfPageSize
      posterList({
        pageNum: pageNum || tempNum,
        pageSize: tempSize,
        mediaType: 5,
        levelType: +this.currentTab,
        categoryId: this.categoryId,
        search: this.queryForm.materialName,
      }).then((res) => {
        this.loading = false
        if (res.code === 200) {
          let { rows, total } = res.data;
          rows && (rows.forEach((item) => {
            item.coverUrl = this.domain + item.coverUrl
          }))
          if (this.currentTab == '0') {
            this.searchNameA = this.queryForm.materialName
            this.companyTableList = rows || []
            this.companyTotal = total || 0
          } else {
            this.searchNameB = this.queryForm.materialName
            this.selfTableList = rows || []
            this.selfTotal = total || 0
          }
        }
      })
    },
    handleSizeChange(val) {
      if (this.currentTab == '0') {
        this.companyPageNum = 1
        this.companyPageSize = val
      } else {
        this.selfPageNum = 1
        this.selfPageSize = val
      }
      this.handleQuery(this.categoryId)
    },
    handleCurrentChange(val) {
      if (this.currentTab == '0') {
        this.companyPageNum = val
      } else {
        this.selfPageNum = val
      }
      this.handleQuery(this.categoryId)
    },
    view(src) {
      this.viewVisible = true
      this.viewSrc = src
    },
    edit(id, name, is_person) {
      this.$router.push({
        name: 'Poster/edit',
        query: {
          name,
          id,
          levelType: name === 'one' ? 0 : 1,
          is_person: is_person,
        },
      })
    },
    del(id) {
      this.$confirm('确认删除海报信息', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (this.currentTab == '0') {
          articleDelCorp(id).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.handleQuery(this.categoryId)
            }
          })
        } else {
          articleDel(id).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.handleQuery(this.categoryId)
            }
          })
        }
      }).catch(() => {})
    },
    toArticle() {
      this.$router.push({
        name: 'Poster/edit',
        query: { is_person: '1' },
      })
    },
    dateFormat,
  },
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  background: #fff;
}
.card-list {
  display: flex;
  flex-wrap: wrap;
  max-height: 930px;

  .card-item {
    position: relative;
    width: 187px;
    height: 290px;
    margin-right: 20px;
    margin-bottom: 20px;

    .title {
      line-height: 2;

      .verify {
        float: right;
        color: #082aff;
      }
    }

    .time {
      text-align: right;
      color: #999;
    }

    &:hover {
      .btn-list {
        display: block;
      }
    }

    .btn-list {
      position: absolute;
      display: none;
      top: 10px;
      right: 10px;
      z-index: 999;

      .el-tag {
        display: block;
        width: 42px;
        margin: 5px 0;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
